<template>
  <view class="setUp">
    <topTitle title="設置" />
    <view class="tab">
      <view class="arrow">
        <view>頭像</view>
        <view @tap="uploadShow = true">
          <up-avatar mode="aspectFill" :src="info.picture" size="50">
          </up-avatar>
        </view>
      </view>
      <view>
        <view>账号</view>
        <view>{{ info.user_name }}</view>
      </view>

      <view
        :class="info?.id_no_lock ? 'copy' : 'arrow'"
        @tap="info?.id_no_lock ? copyText(info.id_no) : (idNoShow = true)"
      >
        <view>ID</view>
        <view>{{ info.id_no }} <i></i></view>
      </view>
      <view
        class="arrow"
        @tap="
          nickNameShow = true;
          nick_name = info.nick_name;
        "
      >
        <view>昵称</view>
        <view>{{ info.nick_name }}</view>
      </view>
      <view class="arrow" @tap="sexShow = true">
        <view>性别</view>
        <view>{{ info.sex ? "女" : "男" }}</view>
      </view>
      <view class="arrow" @tap="goTo('/pages/create/myQrCode')">
        <view>我的二维码</view>
      </view>
    </view>
    <view class="tab">
      <view class="arrow">
        <view>語言切換</view>
        <view><language /></view>
      </view>
      <view class="arrow" @tap="goTo('/pages/pay/changeLoginPassword')">
        <view>修改登錄密碼</view>
      </view>
      <view class="arrow">
        <view>規則協議</view>
      </view>
      <view class="arrow">
        <view>關於我們</view>
      </view>
      <view>
        <view>版本号</view>
        <view>V{{ version_number }}</view>
      </view>
    </view>
    <view class="btn">
      <up-button @tap="LogonFn" text="退出登錄" type="primary"></up-button>
    </view>
    <!-- <view @tap="backupDatabase">备份数据</view> -->
    <up-picker
      :show="sexShow"
      :closeOnClickOverlay="true"
      :defaultIndex="[info.sex]"
      :columns="columns"
      keyName="label"
      @close="sexShow = false"
      @cancel="sexShow = true"
      @confirm="confirm"
    ></up-picker>
    <up-action-sheet
      round="10"
      :actions="itemList"
      :closeOnClickOverlay="true"
      :closeOnClickAction="true"
      :show="uploadShow"
      @close="uploadShow = false"
      cancelText="取消"
      @select="selectFn"
    ></up-action-sheet>
    <up-modal
      :show="nickNameShow"
      confirmText="确认"
      cancelText="取消"
      title="修改昵称"
      :showCancelButton="true"
      @cancel="nickNameShow = false"
      @confirm="confirm"
    >
      <up-input
        placeholder="请输入昵称"
        border="surround"
        focus
        v-model="nick_name"
      ></up-input>
    </up-modal>
    <up-modal
      :show="idNoShow"
      confirmText="确认"
      cancelText="取消"
      title="修改ID"
      :showCancelButton="true"
      @cancel="idNoShow = false"
      @confirm="confirm"
    >
      <up-input
        placeholder="请输入ID"
        border="surround"
        focus
        v-model="id_no"
      ></up-input>
    </up-modal>
  </view>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance, reactive } from "vue";
import { onShow, onReachBottom } from "@dcloudio/uni-app";
import { UserInfo, UserInfoUpdate, LogOut } from "@/api/UserApi";
import { UploadToken } from "@/api/SystemApi";
const instance = getCurrentInstance()?.appContext.config.globalProperties;

let version_number = ref();
// 获取当前app的版本
const systemInfo = uni.getSystemInfoSync();
// #ifdef H5
version_number.value = systemInfo.appVersion;
// #endif
// #ifdef APP
version_number.value = systemInfo.appWgtVersion;
// #endif

// 获取用户信息
let info = ref<any>();
const UserInfoFn = async () => {
  info.value = uni.getStorageSync("userInfo");
  info.value = await UserInfo();
};
UserInfoFn();

let sexShow = ref<boolean>(false);
const columns = reactive([
  [
    {
      label: "男",
      index: 0,
    },
    {
      label: "女",
      index: 1,
    },
  ],
]);
const itemList = ref([
  {
    name: "從相冊選擇",
    sourceType: "album",
  },
  {
    name: "使用相機拍攝",
    sourceType: "camera",
  },
]);
let uploadShow = ref<boolean>(false);
let nickNameShow = ref<boolean>(false);
let idNoShow = ref<boolean>(false);
const selectFn = (e: any) => {
  console.log(e);
  uploadImage(e.sourceType);
};

// 上传头像
const uploadImage = async (type: string) => {
  let obj = await UploadToken(1, 1, type);
  info.value = { ...info.value, picture: obj.downloadurl };
  UserInfoUpdate({ picture: obj.objectName });
};

// 更改用户名称
let nick_name = ref<string>();
let id_no = ref<string>();
const confirm = async (e: any) => {
  if (nickNameShow.value) {
    await UserInfoUpdate({ nick_name: nick_name.value });
    nickNameShow.value = false;
    info.value.nick_name = nick_name.value;
  }
  if (idNoShow.value) {
    const regex = /^[A-Za-z0-9]{6,8}$/;
    if (!id_no.value || !regex.test(id_no.value)) {
      uni.showToast({
        title: "ID 必须是 6 到 8 位的字母或数字组合！",
        icon: "none",
      });
      return;
    }
    await UserInfoUpdate({ id_no: id_no.value });
    idNoShow.value = false;
    info.value.id_no = id_no.value;
    info.value.id_no_lock = true;
  }
  if (sexShow.value) {
    console.log(e.indexs[0]);
    await UserInfoUpdate({ sex: e.indexs[0] });
    sexShow.value = false;
    info.value.sex = e.indexs[0];
  }
};

const LogonFn = () => {
  uni.showModal({
    title: "温馨提示",
    content: "确认退出登录吗？",
    confirmText: "确认",
    cancelText: "取消",
    success: async (r) => {
      if (r.confirm) {
         LogOut();
        instance?.goTo("/pages/notLoggedIn/login");
      }
    },
  });
};
onShow(() => {});
onReachBottom(() => {
  console.log("123");
});

const backupDatabase = () => {
  instance?.$db.backupDatabase();
};
</script>
<style scoped lang="scss">
@import "../../static/scss/setUp.scss";
</style>
